<template>
<div>
    <el-container class="container-box">
        <span style="width: 245px;"><!-- 留空, 便于后面悬浮放置菜单栏 --></span>
        <!-- 主界面 -->
        <span class="my-content">
            <router-view></router-view>
        </span>
    </el-container>
    <!-- 菜单悬浮放置于左手侧（或右手侧，需根据实际情况调整页面布局） -->
    <el-aside class="my-navi-bar" style="width: 244px;">
        <el-menu router :default-openeds="menusExpanded">
            <el-submenu v-for="(dir,i) in $router.options.routes" :index="i.toString()" :key="i">
                <template slot="title"><i class="el-icon-menu"></i>{{ dir.name }}</template>
                <el-menu-item v-for="(child, j) in dir.children"
                              :index="child.path"
                              :key="j"
                              :class="child.name === $route.name?'is-active':'' ">
                    <i class="el-icon-location"></i> {{ child.name }}
                </el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i><span>临时菜单</span>
                </template>
                <el-menu-item-group>
                    <template slot="title">分组A</template>
                    <el-menu-item index="2-1">页面2-1</el-menu-item>
                    <el-menu-item index="2-2">页面2-2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组B">
                    <el-menu-item index="2-3">页面2-3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="2-4">
                    <template slot="title">页面2-4</template>
                    <el-menu-item index="2-4-1">子页面2-4-1</el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
    </el-aside>
</div>
</template>

<script>
import '@/assets/styles/global.styl'

export default {
    name: 'App',
    components: {},
    data() {
        return {
            menusExpanded: ['0', '1'],
        }
    }
}
</script>

<style lang="stylus" scoped>
.container-box
    // 外框固定不动
    position: fixed
    top: 0
    left: 0
    right: 0
    height: calc(100vh - 0px);
    display: flex;
    flex-direction: row
.my-content
    // 主界面基于flex布局放置
    flex: 1
.my-navi-bar
    // 导航菜单悬浮在顶层
    position: fixed
    left: 0
    top: 0
    bottom: 0
</style>
